<template>
  <h4>{{ title }}</h4>
  <div>
    <el-form inline>
      <el-form-item label="共计：">{{ dataInfo.total || 0 }}条 </el-form-item>
      <el-form-item v-if="type !== 'day'" label="订单数："
        >{{ dataInfo.amount || 0 }}
      </el-form-item>
      <el-form-item v-if="type !== 'day'" label="订单金额："
        >{{ dataInfo.payment || 0 }}
      </el-form-item>
    </el-form>
  </div>
  <div v-if="type == 'day'">
    <el-table
      stripe
      :data="dataInfo.data || []"
      border
      :height="store.tableHeight - 150"
    >
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="contract_cnt" label="订单数" />
      <el-table-column prop="contract_amount" label="订单金额" />
      <el-table-column prop="rece_cnt" label="回款数" />
      <el-table-column prop="rece_amount" label="回款额" />
      <el-table-column width="100" label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" link @click="toPage(row)"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; display: flex; justify-content: center">
      <el-pagination
        :small="true"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div v-else>
    <el-table stripe :data="dataInfo.data || []" border>
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="count" label="订单数" />
      <el-table-column prop="amount" label="订单金额" />
      <el-table-column prop="plans" label="销售额" />
      <el-table-column prop="reces" label="回款额" />
      <el-table-column width="100" label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" link @click="toPage(row)"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-button style="margin-top: 15px" type="primary" round @click="back"
    >返回上一页</el-button
  >
</template>
<script setup>
import {
  dayStatApi,
  contractMonthApi,
  contractYearApi,
} from "@/plugins/api/finance/sale.js";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();
const route = useRoute();
const router = useRouter();
let dataInfo = ref({});
let title = ref("");
function back() {
  router.back();
}
function toPage(row) {
  router.push({
    path: "/finance/sale",
    query: {
      date: row.date,
    },
  });
}
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
function getData() {
  dayStatApi({
    page: currentPage.value,
    pageSize: pageSize.value,
  }).then((data) => {
    console.log(data);
    dataInfo.value = {
      data: data.list,
      total: data.page.total,
    };
    total.value = data.page.total;
  });
}
let type = ref("");
onMounted(() => {
  type.value = route.query.type;
  if (type.value == "day") {
    title.value = "日订单统计";
    getData();
  } else if (type.value == "month") {
    title.value = "月订单统计";
    contractMonthApi().then((data) => {
      dataInfo.value = data;
    });
  } else if (type.value == "year") {
    title.value = "年订单统计";
    contractYearApi().then((data) => {
      dataInfo.value = data;
    });
  }
});
</script>

<style scoped lang="scss"></style>
